<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
    <div>
        <label>姓名：
            <input type="text" id="name">
        </label>
    </div>
    <div>
        <label>爱好：
            <input type="text" id="hobby">
        </label>
    </div>
    <button id="cancel" type="button">取消</button>
    <button id="submit" type="button">提交</button>

</div>
<script src="jquery.js"></script>
<script>
    // 定义一个清空输入框并且隐藏模态框的方法
    function hideModal(){
         // 1. 清空input的值
        $("#name,#hobby").val('');
        // 2. 隐藏起来
        $(".cover,.modal").addClass('hide');
    }
    // 开除按钮的功能
    $("table").on('click', '.fire', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我
        //们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
        // 点击开除按钮要做的事儿
        // 把当前行移除掉
        //this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
    });
    // 新增按钮的功能
    $("#add").click(function () {
        // 点击新增按钮要做的事儿
        // 1. 移除cover和modal的hide样式
        $(".cover,.modal").removeClass('hide');
    });
    // 点击modal中的cancel按钮
    $("#cancel").click(function () {
       hideModal();
    });

    // 点击modal中的submit按钮
    $("#submit").click(function () {
        // 1. 获取用户输入的值
        var name = $("#name").val();
        var hobby = $("#hobby").val();
        // 2. 隐藏模态框，清空输入框
        hideModal();
        // 3. 创建一个tr标签，把数据塞进去
        var trEle = document.createElement("tr");
        $(trEle).append('<td><input type="checkbox"></td>');
        $(trEle).append('<td>' + name + '</td>');
        var tdTmp = document.createElement('td');
        tdTmp.innerText = hobby;
        $(trEle).append(tdTmp);
        $(trEle).append('<td><button class="fire">开除</button></td>')
        // 4. 把上一步的tr追加到表格的tbody后面
        $('tbody').append(trEle);
    });
　　//先用下面这种方式写，你会发现一些问题，我们新添加的每一行数据里面的那个button标签点击删除的时候没有效果
    //  // 点击modal中的submit按钮
    // $("#submit").on('click', function () { #这个和直接$('submit').click(function ...)是一样的
    //     // 1. 获取用户输入的值
    //     var name = $("#name").val();
    //     var hobby = $("#hobby").val();
    //     // 2. 隐藏模态框，清空输入框
    //     hideModal();
    //     // 3. 创建一个tr标签，把数据塞进去
    //     var trEle = document.createElement("tr");
    //     $(trEle).append('<td><input type="checkbox"></td>');
    //     $(trEle).append('<td>' + name + '</td>');
    //     var tdTmp = document.createElement('td');
    //     tdTmp.innerText = hobby;
    //     $(trEle).append(tdTmp);
    //     $(trEle).append('<td><button class="fire">开除</button></td>')
    //     // 4. 把上一步的tr追加到表格的tbody后面
    //     $('tbody').append(trEle);
    // })

</script>

</body>
</html>